<template>
  <div class="h-screen w-screen flex flex-col">
    <div v-if="loading" class="flex-auto flex items-center justify-center">
      <van-loading vertical>加载中...</van-loading>
    </div>

    <template v-else>
      <div
        class="flex flex-row items-center px-[22px] py-3 justify-between"
        v-if="!isPC()"
      >
        <div class="flex flex-row items-center">
          <div
            class="text-xs bg-yxt-blue-light px-2 py-1 rounded-sm mr-2"
            :style="{
              color: getStatusInfo(businessOpportInfo.status).color,
              backgroundColor: getStatusInfo(businessOpportInfo.status).bgColor,
            }"
          >
            {{ getStatusInfo(businessOpportInfo.status).name }}
          </div>
          <h2 class="text-[#262626] text-[16px] font-bold mr-1">
            {{ cp_name }}
          </h2>
        </div>

        <van-popover
          v-if="!cp_myTeam && moreActions.length > 0"
          v-model:show="showMorePopover"
          placement="bottom-end"
          :actions="moreActions"
          @select="onSelectMoreActions"
        >
          <template #reference>
            <van-icon name="ellipsis" />
          </template>
        </van-popover>
      </div>
      <van-tabs v-model:active="active" sticky class="my-tabs">
        <van-tab :title="item.name" v-for="item in tabs" :key="item.type" color="red">
        </van-tab>
      </van-tabs>

      <div class="flex-auto flex flex-col">
        <competition :isCustomer="false" v-if="cp_item.type === 'competition'" />
        <customerAttend :isCustomer="false" v-if="cp_item.type === 'customerAttend'" />
        <riskIdentification
          :isCustomer="false"
          v-if="cp_item.type === 'riskIdentification'"
        />
        <todo :isCustomer="false" v-if="cp_item.type === 'todo'" />
        <visitRecord :isCustomer="false" v-if="cp_item.type === 'visitRecord'" />
        <meddic :isCustomer="false" v-if="cp_item.type === 'meddic'" />
        <opportunityList
          :isCustomer="false"
          v-if="cp_item.type === 'businessOpportunity'"
        />
      </div>
    </template>
  </div>
</template>

<script setup>
import competition from "../components/competition/index.vue";
import customerAttend from "../components/customerAttend/index.vue";
import riskIdentification from "../components/riskIdentification/index.vue";
import todo from "../components/todo/index.vue";
import visitRecord from "../components/visitRecord/index.vue";
import meddic from "../components/meddic/index.vue";
import opportunityList from "../components/opportunityList/index.vue";
import { openPathInNewTab } from "@/utils/urlTool";
import { isPC } from "@/utils/platformTool";
import { getLongTimeAgo } from "@/utils/timeTool";
import { computed, onBeforeMount, ref, toRefs } from "vue";
import { useRoute } from "vue-router";
import { useBusinessStore, useCommonStore } from "@/store";
import { setToken } from "@/utils/auth";
import { getUserInfo } from "@/utils/auth";
import { useRouter } from "vue-router";

const commonStore = useCommonStore();
const route = useRoute();
const store = useBusinessStore();
const defaultTabIndex = ref(0);
const router = useRouter();

const { myTeam } = route.query;

const cp_myTeam = computed(() => {
  return myTeam === "true";
});

const isPc = computed(() => {
  return isPC();
});

const cp_isToB = computed(() => {
  return commonStore.isToB;
});

const active = ref(0);
const cp_item = computed(() => {
  return tabs.value[active.value];
});

const tabs = computed(() => {
  let array = [
    {
      name: "预警",
      type: "riskIdentification",
    },
    {
      name: "沟通记录",
      type: "visitRecord",
    },
    {
      name: "MEDDIC",
      type: "meddic",
    },
    {
      name: "客户参会人",
      type: "customerAttend",
    },
    {
      name: "待办",
      type: "todo",
    },
    {
      name: "竞争对手",
      type: "competition",
    },
  ];
  return array;
});

function getStatusInfo(status) {
  let statusInfo = {
    1: {
      name: "进行中",
      color: "#436BFF",
      bgColor: "#F0F6FF",
    },
    2: {
      name: "赢单",
      color: "#04CCA4",
      bgColor: "#04CCA42C",
    },
    3: {
      name: "输单",
      color: "#FA8C16",
      bgColor: "#FA8C1632",
    },
  };
  let otherInfo = {
    name: "其他",
    color: "#595959",
    bgColor: "#F5F5F5",
  };
  return statusInfo[status] || otherInfo;
}

function changeIndex(index) {
  console.log("changeIndex: ", index);
  active.value = index;
}

function onSelectMoreActions(action) {
  const { type } = action;
  if (type === "orderVisit") {
    // 跳转到安排沟通
    const { name = "", id = "" } = route.query;
    openPathInNewTab("/orderVisit", {
      name,
      opportunityId: id,
    });

    return;
  }
}

// 是否允许创建拜访
const enableCreateCommunicate = () => {
  const { ssoUserId = "", followSsoUserIds = [], status = -1 } = businessOpportInfo.value;
  const { userInfo } = commonStore;
  return (
    (ssoUserId === userInfo.ssoUserId || followSsoUserIds.includes(userInfo.ssoUserId)) &&
    status === 1
  );
};

const moreActions = computed(() => {
  let array = [];
  if (enableCreateCommunicate()) {
    array.push({ text: "安排沟通", type: "orderVisit" });
  }
  return array;
});

onBeforeMount(() => {
  init();
});

async function init() {
  const { name, token, id } = route.query;

  console.log("route.query: ", route.query);
  if (token) {
    setToken(token);
  }
  store.businessId = id;
  store.companyName = name;

  const dateRange = getLongTimeAgo();
  store.filterStartTime = dateRange.startDate;
  store.filterEndTime = dateRange.endDate;
  await store.getOuterFiledPartnerAction();

  getData();
}

const cp_name = computed(() => {
  return store.companyName;
});

const businessOpportInfo = computed(() => {
  return store.businessOpportInfo;
});

const loading = ref(true);
async function getData() {
  loading.value = true;
  await commonStore.getUserInfoAction();
  await commonStore.getFuncpPointsAction();
  await store.getOpportunityDetailAction();
  await store.getOpportunityCommunicationStagesAction();
  loading.value = false;
}
</script>

<style lang="less" scoped></style>
